<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8">
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<title>一起一起分类病小游戏</title>

	<link href="css/app.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

</head>
<body style="padding:0 0 0 0;background-color: #BBF4FD">
<div class="container">
	<div id="multi">
			<div class="tile__list" style="height: 180px;}">
				<div style="display: inline-block">
					<img style="height:66px;width:80px;" src="img/1.png">
				</div>
				<div style="display: inline-block">
					<img style="height:66px;width:80px" src="img/2.png">
				</div>
				<!-- <div style="display: inline-block">
					<img style="height:66px;width:80px" src="3.png"/>
				</div> -->
				<div style="display: inline-block">
					<img style="height:66px;width:80px" src="img/4.png">
				</div>
				<div style="display: inline-block">
					<img style="height:66px;width:80px" src="img/5.png">
				</div>
				<div style="display: inline-block">
					<img style="height:66px;width:80px" src="img/6.png">
				</div>
				<div style="display: inline-block">
					<img style="height:66px;width:80px" src="img/7.png">
				</div>
				<div style="display: inline-block">
					<img style="height:66px;width:80px" src="img/8.png">
				</div>
				<div style="display: inline-block">
					<img style="height:66px;width:80px" src="img/9.png">
				</div>
				<div style="display: inline-block">
					<img style="height:66px;width:80px" src="img/10.png">
				</div>
				<div style="display: inline-block">
					<img style="height:66px;width:80px" src="img/11.png">
				</div>
				<div style="display: inline-block">
					<img style="height:66px;width:80px" src="img/12.png">
				</div>

			</div>
		</div>

		<div class="layer" style="width:100%;background:#BBF4FD;" data-force="25">

			<table style="border:1px;width:100%" border="1" cellspacing="1" cellpadding="1">
				<tbody><tr style="height:100px;">
					<td style="height:30%;width:16%;background-color:#BBF4FD " id="lineTd"> <span style="float:left;margin-top:20px;background-color:#BBF4FD "></span>
						<span style="float:right;margin-top:-10px;"></span></td>
					<td style="height:30%;width:42%"><img style="height:66px;width:80px" src="img/13%E7%88%B8%E7%88%B8.png"></td>
					<td style="height:30%;width:42%"><img style="height:66px;width:80px" src="img/14%E5%A6%88%E5%A6%88.png"></td>
				</tr>
				<tr style="height:250px">
					<td><img style="height:150px;width:100px;" src="img/15%E9%9E%8B%E6%9F%9C.png"></td>
					<td>
						<div class="tile__list"></div>
					</td>
					<td>
						<div class="tile__list"></div>
					</td>
				</tr>
				<tr style="height:250px">
					<td><img style="height:100px;width:100px" src="img/16%E6%B4%97%E8%84%B8%E6%B1%A0.png"></td>
					<td>
						<div class="tile__list"></div>
					</td>
					<td>
						<div class="tile__list"></div>
					</td>
				</tr>
			</tbody></table>

		</div>


	</div>
</div>




<script type="text/javascript" src="js/Sortable.js"></script>
<script type="text/javascript">

    (function () {
        // 弹出时
        $('body').css({
            position: 'fixed',
            top: -document.body.scrollTop + 'px'
        });

        var console = window.console;

        if (!console.log) {
            console.log = function () {
                alert([].join.apply(arguments, ' '));
            };
        }


        Sortable.create(multi, {
            animation: 150,
            draggable: '.tile',
            handle: '.tile__list'
        });


        //var editableList = Sortable.create(editable, {
        //	animation: 150,
        //	filter: '.js-remove',
        //	onFilter: function (evt) {
        //		evt.item.parentNode.removeChild(evt.item);
        //		}
        //});




        [].forEach.call(multi.getElementsByClassName('tile__list'), function (el) {
            Sortable.create(el, {
                group: 'photo',
                animation: 150
            });
        });


        [{
            name: 'advanced',
            pull: true,
            put: true
        },
            {
                name: 'advanced',
                pull: 'clone',
                put: false
            }, {
            name: 'advanced',
            pull: false,
            put: true
        }].forEach(function (groupOpts, i) {
            Sortable.create(document.getElementById('advanced-' + (i + 1)), {
                sort: (i != 1),
                group: groupOpts,
                animation: 150
            });
        });

        Sortable.create(document.getElementById('handle-1'), {
            handle: '.drag-handle',
            animation: 150
        });

    })();


</script>


<style>
	/* Tomorrow Theme */
	/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
	/* Original theme - https://github.com/chriskempson/tomorrow-theme */
	/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
	#lineTd {
		background: #fff url() no-repeat 100% center;

	}
	.tomorrow-comment, pre .comment, pre .title {
		color: #8e908c;
	}

	.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
		color: #c82829;
	}

	.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
		color: #f5871f;
	}

	.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
		color: #eab700;
	}

	.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
		color: #718c00;
	}

	.tomorrow-aqua, pre .css .hexcolor {
		color: #3e999f;
	}

	.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
		color: #4271ae;
	}

	.tomorrow-purple, pre .keyword, pre .javascript .function {
		color: #8959a8;
	}

	pre {
		border: 0;
		background-color: #fff;
	}

	pre code {
		display: block;
		color: #4d4d4c;
		font-size: 15px;
		font-family: Menlo, Monaco, Consolas, monospace;
		line-height: 1.5;
		padding: 30px;
	}
</style>



</body></html>